<template>
  <div class="sousuo">
    <div class="booktop">
      <div class="top">
        <div class="top1">
          <div class="imgs" @click="toindex()">
            <img src="../../assets/images/logon.png" alt="" />
          </div>
          <div class="lefts" @click="toindex()">
            <div></div>
            <div class="lefts1">浙江省非物质文化<br />数字文献中心</div>
            <div class="lefts2">
              ZhejiangProvinceIntangibleCultureDigitalLiteratureCenter
            </div>
            <div></div>
          </div>
          <div class="rights">
            <div></div>
            <usertbtn></usertbtn>
            <div class="ris3" style="margin-bottom: 60px">
              <!-- <div
                class="ris31"
                :class="jiansuo == 0 ? 'actis' : ''"
                @click="onJiansuo(0)"
              >
                高级检索
              </div>
              <div
                class="ris31"
                :class="jiansuo == 1 ? 'actis' : ''"
                @click="onJiansuo(1)"
              >
                句子检索
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jstj">
      <div class="jstjh">
        <div class="jstj1">
          <div class="jstsj11">
            <div class="j1"></div>
            <div class="j2">
              <div class="j21">
                <span>
                  <el-select v-model="formInline.booknamest" placeholder="">
                    <el-option label="名称" value="0"></el-option>
                    <!-- <el-option label="名称" value="1"></el-option> -->
                  </el-select>
                </span>
                <div style="margin-top: 10px">|</div>
              </div>
              <div class="j22">
                <el-input v-model="formInput.jsInputBookname"></el-input>
              </div>
              <div class="j23">
                <span>|</span>
                <el-select v-model="formInline.bookname" placeholder="">
                  <el-option label="模糊" value="1"></el-option>
                  <el-option label="精确" value="0"></el-option>
                  
                </el-select>
              </div>
            </div>
          </div>
          <div class="jstsj11">
            <div class="j1"></div>
            <div class="j2">
              <div class="j21" style="width:100%">
                <span style="width:100%">
                  <el-select v-model="formInline.booknamest1" placeholder="请选择一级类目" @change="yjchange" :disabled='disabled'>
                    <el-option :label="item.name" :value="item.id" v-for="(item,index) in yijilb" :key="item.id">{{item.name}}</el-option>
                    
                  </el-select>
                </span>
              
              </div>
              <!-- <div class="j22">
                <el-input v-model="formInput.jsInputNam"></el-input>
              </div> -->
              <!-- <div class="j23">
                <span>|</span>
                <el-select v-model="formInline.bookname1" placeholder="">
                  <el-option label="精确" value="0"></el-option>
                  <el-option label="模糊" value="1"></el-option>
                </el-select>
              </div> -->
            </div>
            <div class="add" @click="inputs()">+</div>
          </div>
          <div class="jstsj11" v-show="shows">
            <div class="j1"></div>
            <div class="j2">
              <div class="j21" style="width:100%">
                <span style="width:100%">
                  <el-select v-model="formInline.booknamest2" placeholder="请选择二级类目" @change="ejchange">
                    <el-option :label="item.name" :value="item.id" v-for="(item,index) in erjlb" :key="item.id">{{item.name}}</el-option>
                    
                  </el-select>
                </span>
              
              </div>
              <!-- <div class="j22">
                <el-input v-model="formInput.jsInputNam"></el-input>
              </div> -->
              <!-- <div class="j23">
                <span>|</span>
                <el-select v-model="formInline.bookname1" placeholder="">
                  <el-option label="精确" value="0"></el-option>
                  <el-option label="模糊" value="1"></el-option>
                </el-select>
              </div> -->
            </div>
            <div class="add" @click="inputs()">-</div>
          </div>
          <div class="jstsj11">
            <div class="j1">时间 :</div>
            <div class="j3">
              <div class="j31">
                <div class="j21" style="width:2%"><span></span></div>
                <div class="j32" style="width:90%">
                  <el-date-picker
                    v-model="formInput.time"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div class="j33" v-if="acnav !=3">
                <div class="j331">级别 ：</div>
                <div class="j332">
                  <el-select v-model="formInline.bookname3">
                    <el-option :label="item.name" :value="item.id" v-for="(item,index) in jebie" :key="item.id"></el-option>
                    
                  </el-select>
                </div>
              </div>
            </div>
          </div>

          <div class="sub">
            <div class="sub1" @click="chongzhi()">重置条件</div>
            <div class="sub2" @click="jiansuomax()">检索</div>
          </div>
        </div>
        <div class="jstj2">
          <div class="topj">高级检索使用方法:</div>
          <div class="topj1">
            高级检索支持使用运算符*、+、-、”、""、()进行同一检索项内多个检索词的组合运算，检索框内输入的内容不得超过120个字符。输入运算符*(与)、+(或)、-(非)时，前后要空个字节，优先级需用英文半角括号确定。若检索词本身含空格或*、+、-、()、/、%、等特殊符号，进行多词组合运算时，为避免歧义须将检索词用英文半角单引号或英文半角双引号引起来.
          </div>
        </div>
      </div>
      <div class="jstjh1">
        <div class="jstjh11">
          <div
            class="jstjh12"
            @click="tonav(item.id)"
            :class="acnav == item.id ? 'acnav' : ''"
            v-for="(item, index) in navslist"
            :key="item.id"
          >
            <div></div>
            <div></div>
            <div>{{ item.name }}</div>
            <div class="icon">
              <i
                v-if="acnav == item.id"
                style="font-size: 28px"
                class="el-icon-caret-bottom"
              ></i>
              <i
                v-else
                style="
                  font-size: 28px;
                  color: rgba(255, 255, 255, 0.0000000000001);
                "
                class="el-icon-caret-bottom"
              ></i>
            </div>
          </div>
          <!-- <div class="jstjh12"></div> -->
        </div>
      </div>
    </div>
    <div class="jstjh13" v-show="acnav == 0">
      <Index :shuzinum="formInput" :shu="formInline" :sznum="formInput.quanbu"></Index>
    </div>
    <div class="jstjh13" v-show="acnav == 1">
      <Index :shuzinum="formInput" :shu="formInline" :shuzi="formInput.shuzi"></Index>
    </div>
    <div class="jstjh13" v-show="acnav == 2">
      <Index :shuzinum="formInput" :shu="formInline" :shuji="formInput.books"></Index>
    </div>
    <div class="jstjh13" v-show="acnav == 3">
      <Yinx :shuzinum="formInput" :shu="formInline" :yxnum="formInput.yxs"></Yinx>
    </div>
    <div class="jstjh13" v-show="acnav == 4">
      <Index :shuzinum="formInput" :shu="formInline" :lilun="formInput.lilun"></Index>
    </div>
    <!-- <div class="jstjh13" v-if="acnav == 5">报刊类</div>
        <div class="jstjh13" v-if="acnav == 6">音像资料</div>
        <div class="jstjh13" v-if="acnav == 7">活动文献</div> -->
    <div style="width: 100%; height: 100px"></div>
    <div class="foot">
      <footbtn></footbtn>
    </div>
  </div>
</template>
<style scoped  lang="scss">
::v-deep .el-select{
  width: 100% !important;
  
}
::v-deep .el-checkbox {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d !important;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #911f23 !important;
  border-color: #911f23 !important;
}
::v-deep .el-checkbox__input.is-fcous .el-checkbox__inner {
  border-color: #911f23 !important;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #911f23 !important;
  border-color: #911f23 !important;
}

::v-deep .el-date-editor .el-range__icon {
  display: none !important;
}
::v-deep .el-date-editor .el-range__close-icon {
  display: none;
}
::v-deep .el-input__inner {
  border: 0px;
}
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}
::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}
//搜索框
::v-deep .el-input-group > .el-input__inner {
  height: 56px;
  border: 0px;
}
::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}
::v-deep .el-divider--vertical {
  // height: 40px;
  background-color: #999999;
}
::v-deep .el-dropdown-menu {
  width: 130px;
}
::v-deep .el-select .el-input .el-select__caret {
  color: #666;
}
::v-deep .el-date-editor.el-input{
  width: 100%;
}

.sousuo {
  width: 100%;
  // min-height: 100vh;

  .booktop {
    width: 100%;
    height: 176px;
    background: url("../../assets/images/booktop.png") no-repeat;
    background-size: 100% 100%;
    .top {
      width: 1400px;
      height: 176px;
      margin: 0 auto;
      // background-color: #F7F7F8;
      .top1 {
        position: relative;
        width: calc(100% - 0px);
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: pink;
        .imgs {
          position: absolute;
          top: 0;
          width: 138px;
          height: 176px;
          z-index: 100;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lefts {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-left: 170px;
          cursor: pointer;
          .lefts1 {
            font-size: 24px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            // line-height: 35px;
          }
          .lefts2 {
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }
        .rights {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          // padding-bottom: 40px;
          height: 100%;

          .ris3 {
            display: flex;
            .ris31 {
              width: 115px;
              height: 45px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
              cursor: pointer;
            }
            .actis {
              background-color: #911f23;
              color: #fff;
            }
          }
          .ri {
            padding-right: 30px;
          }
        }
      }
    }
  }
  .jstj {
    width: 100%;
    margin: 24px auto 32px;
    .jstjh {
      width: 1400px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      .jstj1 {
        width: 950px;
        background-color: #fff;
        padding: 32px 16px 64px;
        .jstsj11 {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          .j1 {
            width: 110px;
            font-size: 14px;
            color: #666;
            text-align: right;
          }
          .j2 {
            width: 700px;
            height: 40px;
            display: flex;
            align-items: center;
            border: 1px solid #999;
            border-radius: 4px;
            margin-left: 16px;
            .j21 {
              width: calc(15% - 0px);
              display: flex;
              justify-content: space-around;
              font-size: 14px;
              color: #666;
              span {
                // padding-left: 12px;
                width: 90%;
                text-align: center;
              }
            }
            .j22 {
              width: 73%;
            }
            .j23 {
              display: flex;
              align-items: center;
              width: 12%;
              span {
                font-size: 14px;
                color: #666;
              }
            }
          }
          .add {
            margin-left: 16px;
            font-size: 24px;
            color: #666;
            font-weight: 550;
            cursor: pointer;
          }
          .j3 {
            display: flex;
            align-items: center;
            margin-left: 16px;
            .j31 {
              width: 300px;
              height: 40px;
              display: flex;
              align-items: center;
              border: 1px solid #999;
              border-radius: 4px;
              .j21 {
                width: calc(28% - 0px);
                display: flex;
                justify-content: space-around;
                align-items: center;
                font-size: 14px;
                color: #666;
                span {
                  // padding-left: 8px;
                  width: 90%;
                  text-align: center;
                  font-size: 14px;
                  color: #666;
                }
              }
              .j32 {
                width: 78%;
              }
            }
            .j33 {
              display: flex;
              align-items: center;
              margin-left: 20px;
              font-size: 14px;
              color: #666;
              .j332 {
                width: 332px;
                border: 1px solid #999;
                border-radius: 4px;
              }
            }
          }
          .j4 {
            margin-left: 16px;
            .j41 {
              display: flex;
              align-items: center;
            }
          }
        }
        .sub {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 60px;
          .sub1 {
            font-size: 14px;
            color: #666;
            cursor: pointer;
          }
          .sub2 {
            width: 100px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #911f23;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 550;
            color: #fff;
            margin-left: 40px;
            cursor: pointer;
          }
        }
      }
    }
    .jstjh1 {
      width: 100%;
      height: 80px;
      background: url("../../assets/images/jsbj.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 40px;
      .jstjh11 {
        width: 1400px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 0 auto;
        font-size: 16px;
        color: #fff;
        .jstjh12 {
          display: flex;
          align-items: center;
          height: 100%;
          color: #fff;
          width: 10%;
          justify-content: space-between;
          flex-direction: column;
          cursor: pointer;
        }
        .acnav {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100%;
          background-color: #fff;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          color: #333;
          width: 10%;
          justify-content: space-between;
        }
      }
      .jstjh13 {
        width: 1400px;
        margin: 0 auto;
        // text-align: center;
        padding-top: 12px;
      }
    }

    .jstj2 {
      width: calc(400px - 32px);
      background-color: #fff;
      padding: 32px 16px;
      .topj {
        font-size: 18px;
        color: #333;
      }
      .topj1 {
        font-size: 14px;
        color: #666;
        padding-top: 12px;
        line-height: 30px;
      }
    }
  }
  .foot {
    // position: fixed;
    // bottom: 0;
    // z-index: 12;
  }
}
</style>

<script>
import footbtn from "../../components/foot/index.vue";
import usertbtn from "../../components/user/index.vue";
import Gao from "../../components/gaoji/gaoji1.vue";
import Shuzi from "../../components/gaoji/shuzi.vue";
import Index from "../../components/gaoji/index.vue";
import Book from "../../components/gaoji/Book.vue";
import Yinx from "../../components/gaoji/Yinx.vue";
import Lilun from "../../components/gaoji/Lilun.vue";
//  import { getUserList,addUser  } from "@/api/api.js";
const cityOptions = ["类型1", "类型2", "类型3", "类型4"];
export default {
  data() {
    return {
      disabled:false,
      shows: false,
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,
      //

      //高级检索
      jiansuo: 0,
      formInput: {
        jsInputBookname: "",
        jsInputName: "",
        jsInputMc: "",
        time: "",

        shuzi: 0,
        quanbu: 0,
        books: 0,
        yxs: 0,
        lilun: 0,
      },
      formInline: {
        bookname: "1",
        bookname1: "0",
        bookname2: "0",
        bookname3: "",
        booknamest: "0",
        booknamest1: "",
        booknamest2: "",
      },
      navslist: [
        {
          id: 0,
          name: "全部",
          path: "/s1",
          children: [],
        },
        {
          id: 1,
          name: "数字档案",
          path: "/s2",
          children: [
            // {id:0,names:'普查文献'}
          ],
        },
        {
          id: 2,
          name: "集成志书",
          path: "/s3",
          children: [
            // {id:0,names:'普查文献'}
          ],
        },
        {
          id: 3,
          name: "音像资料",
          path: "/s4",
          children: [
            // {id:0,names:'普查文献'}
          ],
        },
        {
          id: 4,
          name: "理论研究",
          path: "/s5",
          children: [
            // {id:0,names:'普查文献'}
          ],
        },
      ],
      acnav: 0,
      yijilb:[
        // {id:'0',name:'一级类目',children:[]},
        {id:'1',name:'数字文档',children:[
          { id: 5, name: "普查线索档案", fid: 2, num: 0, children: [] },
          { id: 6, name: "调查项目档案", fid: 2, num: 0, children: [] },
          { id: 7, name: "非遗项目申报书", fid: 3, num: 0, children: [] },
          { id: 8, name: "传承人申报书", fid: 3, num: 0, children: [] },
          { id: 9, name: "基地申报书", fid: 3, num: 0, children: [] },
          // {id: 28, mc: "会议档案", fid: 4, num: 0, children: []},
          // {id: 29, mc: "活动档案", fid: 4, num: 0, children: []},
          {id: 30, name: "文件档案", fid: 4, num: 0, children: []}
        ]},
        {id:'44',name:'集成志书',children:[{id:45,name:'书籍'},{id:46,name:'期刊'},{id:47,name:'简报'}]},
        {id:'57',name:'音像资料',children:[{id:58,name:'图片'},{id:59,name:'音频'},{id:60,name:'视频'}]},
        {id:'68',name:'理论研究',children:[{id:69,name:'论文'},{id:70,name:'课题'},]}
      ],
      erjlb:[],
      jebie:[
        {id:12,name:'国家级'},
        {id:13,name:'省级'},
        {id:14,name:'市级'},
        {id:23,name:'县区级'},
      ]
    };
  },
  created() {
    this.acnav = sessionStorage.getItem("erjsnav")
      ? sessionStorage.getItem("erjsnav")
      : 0;
    if(this.acnav ==1){
        this.erjlb =[]
        this.disabled = true
        this.erjlb = this.yijilb[0].children
        this.formInline.booknamest1 = '1'
        this.formInline.booknamest2 = ''
    }else if(this.acnav==0){
        this.disabled =false
        this.formInline.booknamest1 = ''
        this.formInline.booknamest2 = ''
        this.erjlb =[]
    }else if(this.acnav == 2){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[1].children
        this.formInline.booknamest1 = '44'
      }else if(this.acnav == 4){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[3].children
        this.formInline.booknamest1 = '68'
      }else if(this.acnav == 3){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[2].children
        this.formInline.booknamest1 = '57'
      }
  },
  mounted() {
    // this.drawChart()
  },
  methods: {
    yjchange(e){
      this.erjlb = []
      if(e==1){
        this.erjlb = this.yijilb[0].children
      }else if(e==44){
        this.erjlb = this.yijilb[1].children
      }else if(e==57){
        this.erjlb = this.yijilb[2].children
      }else if(e==68){
        this.erjlb = this.yijilb[3].children
      }
      this.formInline.booknamest2=''
    },
    ejchange(){
      if(this.formInline.booknamest1 ==''){
        this.$message.error('请先选择一级类目');
        this.formInline.bookname2 = ''
      }
      
    },
    jiansuomax() {
      if(this.formInput.jsInputBookname){
        if (this.acnav == 1) {
        this.formInput.shuzi++;
        } else if (this.acnav == 0) {
          this.formInput.quanbu++;
        } else if (this.acnav == 2) {
          this.formInput.books++;
        } else if (this.acnav == 3) {
          this.formInput.yxs++;
        } else if (this.acnav == 4) {
          this.formInput.lilun++;
        }
      }else{
        this.$message.error('请输入名称或请选择一级类目');
      }
      
    },
    chongzhi(){
      if(this.acnav == 0){
        this.formInline.booknamest1 = ''
        this.formInline.booknamest2 = ''
        this.formInput.jsInputBookname = ''
        this.formInput.time = ''
        this.formInline.bookname3 = ''
        this.formInline.bookname = '1'

      }else {
        // this.formInline.booknamest1 = ''
        this.formInline.booknamest2 = ''
        this.formInput.jsInputBookname = ''
        this.formInput.time = ''
        this.formInline.bookname3 = ''
        this.formInline.bookname = '1'

      }
    },
    inputs() {
      this.shows = !this.shows;
      this.formInline.booknamest2 = ''
    },
    toindex() {
      sessionStorage.setItem("ids", 0);
      this.$router.push("/index");
    },
    tonav(id) {
      this.acnav = id;
      this.shows =false
      this.formInline.bookname3 = ''
      this.formInput.time = ''
      if(id==0){
        this.disabled =false
        this.formInline.booknamest1 = ''
        this.formInline.booknamest2 = ''
        this.erjlb =[]
      }else if(id == 1){
        this.erjlb =[]
        this.disabled = true
        this.erjlb = this.yijilb[0].children
        this.formInline.booknamest1 = '1'
        this.formInline.booknamest2 = ''
      }
      else if(id == 2){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[1].children
        this.formInline.booknamest1 = '44'
      }else if(id == 4){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[3].children
        this.formInline.booknamest1 = '68'
      }else if(id == 3){
        this.erjlb =[]
        this.disabled = true
        this.formInline.booknamest2 = ''
        this.erjlb = this.yijilb[2].children
        this.formInline.booknamest1 = '57'
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    onJiansuo(id) {
      this.jiansuo = id;
    },
  },
  computed: {},
  components: {
    footbtn,
    usertbtn,
    Gao,
    Shuzi,
    Index,
    Book,
    Yinx,
    Lilun,
  },
};
</script>
